<template>
	<view>

		<view class="tabbar-container" style="background-color: #ffdbed;">
			<view class="Tabbar-Box" :style="uni.$utils.disposeSafeBottomFun()">
				<!-- 显示左侧底栏数据 -->
				<view class="GirdBox">
					<view class="tabbar-item" v-for="(item,index) in LeftItemData" :key="index"
						@click="changeItem(item,index)">
						<view class="item-top">
							<uni-icons :color="currentItem==index ? '#51d0d0' : '#707070'"
								fontFamily="CustomFontPlatform"
								size="20">{{uni.$utils.toUniCode(item.PIC_PH)}}</uni-icons>

						</view>

						<view class="item-bottom" :class="[currentItem == index ? 'item-active' : '']">
							<text>{{ item.APFunName }}</text>
						</view>
					</view>
				</view>

				<!-- 中间的 + 号 -->
				<view class="tabbar-item center-item" @click.stop="changeItemBtn">
					<view class="item-top">
						<view class="x-c" style="background-color: #51d0d0;border-radius: 44px;"
							:style="{ transform: 'rotate(' + rotation + 'deg)',transition: 'transform 0.2s ease' }">

							<uni-icons type="plusempty" size="44" color="#fff"></uni-icons>

						</view>

					</view>
				</view>

				<!-- 显示右侧底栏数据 -->
				<view class="GirdBox">
					<view class="tabbar-item" v-for="(item,index) in RightItemData" :key="index"
						@click="changeItem(item,index + 2)">
						<view class="item-top">

							<uni-icons :color="currentItem == (index+2) ? '#51d0d0' : '#707070'"
								fontFamily="CustomFontPlatform"
								size="20">{{uni.$utils.toUniCode(item.PIC_PH)}}</uni-icons>
						</view>

						<view class="item-bottom" :class="[currentItem == (index+2) ? 'item-active' : '']">
							<text>{{ item.APFunName }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 工作台弹层 -->
		<uni-popup ref="ShowPopup" type="bottom" zIndex="10075" @maskClick="close" background-color="#fff"
			border-radius="10px 10px 0 0">

			<view class="common__popup" :class="[IsEdit ? 'Edit_Main_Box' : 'Routine_Main_Box']">
				<view class="common__popup__top">
					<view v-if="!IsEdit" class="EditClass">
						<view class="Left_Box">工作台</view>
					</view>

					<view v-else class="EditClass">
						<view class="Left_Box" @click="CancelEditBtn">取消</view>
						<view class="Right_Box SaveText" @click="SaveEditBtn">保存</view>
					</view>
				</view>

				<scroll-view class="scroll-Y common__popup__main" :scroll-top="0" scroll-y="true">
					<view class="GirdMaxBox" v-for="(item,index) in MainData" :key="index">
						<view class="TitleName" v-if="item.Node.length">
							<text>{{item.TreeTypeName}}</text>
						</view>
						<u-grid v-if="item.Node.length" :border="false" col="4">
							<u-grid-item v-for="(row,ind) in item.Node" :key="ind" @click="ChoiceModule(row,ind)">
								<view class="PopupGirdBox" :class="[IsEdit ? 'Edit_Icon_Box' : 'Routine_Icon_Box']">
									<view v-if="IsEdit" class="GridIcon_RightTop"
										:class="['GridIcon_RightTop_'+ (row.Type || 'disable')]">
										<uni-icons :color="BackIconConfig(row).color" custom-prefix="iconfont"
											:type="BackIconConfig(row).icon" size="12"></uni-icons>
									</view>

									<uni-icons :color="row.AP_Colour" fontFamily="CustomFontPlatform"
										:size="24">{{uni.$utils.toUniCode(row.PIC_PH)}}</uni-icons>
								</view>
								<text class="grid-text">{{row.APFunName}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</scroll-view>

			</view>
		</uni-popup>

	</view>
</template>

<script setup lang="ts" name="mc-tabbar">
	import { ref, reactive, onMounted, computed } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useMainStore, useUserStore, usePermissionStore, useInventoryStore } from '@/store';
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const inventoryStore = useInventoryStore();
	const permissionStore = usePermissionStore();

	interface Props {
		currentPage : number
	}

	const props = withDefaults(defineProps<Props>(), {
		currentPage: 0
	})


	defineOptions({
		options: {
			styleIsolation: 'shared'
		}
	})
	// 所有模块数据
	const moduleInfoAll = JSON.parse(JSON.stringify(permissionStore.moduleInfoAll));
	// 底栏数据
	const moduleTabbar = permissionStore.moduleTabbar;
	const BottomTabList = computed(() => {
		return permissionStore.moduleTabbar
	});

	// 高亮索引
	// let currentItem = ref(0);
	let currentItem = computed(() => {
		return props.currentPage
	})

	// 底栏左侧
	let LeftItemData = ref<any>([]);
	// 底栏右侧
	let RightItemData = ref<any>([]);
	// 处理底栏数据
	LeftItemData.value.push(...moduleTabbar.slice(0, 2));
	RightItemData.value.push(...moduleTabbar.slice(2, 4));

	// 工作台数据
	let MainData = ref<any>([]);
	// 过滤出工作台需要展示的数据
	MainData.value = moduleInfoAll.map((module : any) => {
		// 使用 filter 方法过滤掉 Show 为 false 的节点
		module.Node = module.Node.filter((item : any) => !item.IsTabbar);
		return module;
	});

	interface rowProps {
		open : () => void,
		close : () => void,
	}

	let ShowPopup = ref<rowProps | any>(null);
	let ShowPopupType = ref(false);

	function changeItem(item : any, index : any) {
		rotation.value = 0;
		ShowPopup.value.close();
		ShowPopupType.value = false;

		if (currentItem.value == index) return;

		if (item.AP_Link) {
			let back_AP_Link = uni.$utils.replaceDispatchPath(item.AP_Link);

			if (back_AP_Link.indexOf("/st_pages/mine") != -1) {
				uni.navigateTo({
					url: back_AP_Link
				});
			} else {
				uni.redirectTo({
					url: back_AP_Link + '?TabbarID=' + index
				});
			}

		}
	};

	// 是否开启工作台编辑
	let IsEdit = ref(false);
	function CancelEditBtn() {

	};
	function SaveEditBtn() {

	}


	// 旋转角度
	let rotation = ref(0)
	// 打开工作台
	function changeItemBtn() {
		rotation.value += 45;
		if (rotation.value >= 90) {
			rotation.value = 0;
		}
		ShowPopupType.value = !ShowPopupType.value;

		switch (ShowPopupType.value) {
			case true:
				ShowPopup.value.open();
				break;
			default:
				ShowPopup.value.close();
				break;
		}
	};
	// 关闭工作台
	function close() {
		rotation.value = 0;
		ShowPopupType.value = false;
		ShowPopup.value.close();
	};
	// 菜单配置映射
	function BackIconConfig(data : { Type : any }) {

		if (data.Type == "disable") {
			return {
				color: '#c8c8c8',
				backGroundColor: '#fff',
				icon: 'icon-suo'
			}
		} else if (data.Type == "delete") {
			return {
				color: '#fff',
				backGroundColor: '#fb6c4c',
				icon: 'icon-jianhao'
			}
		} else if (data.Type == "add") {
			return {
				color: '#fff',
				backGroundColor: '#1eec71',
				icon: 'icon-jiahao'
			}
		} else {
			return {
				color: '#818383',
				backGroundColor: '#e9eded',
				icon: ''
			}
		}
	};
	// 统一解析URL查询参数的方法 (复用逻辑)
	function parseQueryString(query : any) {
		const params = {} as any;
		if (!query) return params;

		// 处理完整的URL或纯查询字符串
		const queryPart = query.includes('?') ?
			query.split('?')[1] || '' :
			query;

		queryPart.split('&').forEach((pair : any) => {
			const [key, value] = pair.split('=');
			if (key) {
				params[decodeURIComponent(key)] = decodeURIComponent(value || '');
			}
		});
		return params;
	};
	// 选中菜单
	function ChoiceModule(data : any, _index : number) {
		if (!uni.$utils.isEmpty(data.AP_Link)) {
			close();
			let path = "";
			let urlArr = "" as any;
			switch (data.JumpTypeName) {
				case 'redirect':
					console.log(data.AP_Link);
					// 处理部分url地址映射
					let back_AP_Link = uni.$utils.replaceDispatchPath(data.AP_Link);
					console.log(back_AP_Link);
					// 提取search拼接
					urlArr = back_AP_Link.split('?');
					path = urlArr[0];

					if (urlArr.length > 1) {
						path = urlArr[0] + '?TabbarID=-1&APFunName=' + data.APFunName + '&' + urlArr[1];
					} else {
						path = urlArr[0] + '?TabbarID=-1&APFunName=' + data.APFunName;
					}

					uni.redirectTo({
						url: path
					});
					break;
				default:
					console.log(data);

					// 判断是否跳转到报表
					if (data.AP_Link.includes('/ReportList/Table')) {

						// const params = parseQueryString(path);

						let port = mainStore.appConfigInfo.serverIP.split(':')[1];

						path = mainStore.appConfigInfo.ICPServerIP + '/AppTable.html?moduleName=' + data.Para + '&port=' + port + '&win_size=win_medium';


						uni.$utils.navigateToWebView({
							url: path,
							title: data.APFunName,
							navBgColor: '#51d0d0',
							navTextColor: '#ffffff'
						});
					}
					// 判断是否跳转到配置表单
					else if (data.AP_Link.includes('/Form/Detail')) {
						const params = parseQueryString(path);
						// 构造表单参数对象
						inventoryStore.MenuDetail = {
							detailTitle: params.objName,
							detailName: params.objName,
							keyName: params.keyName,
							keyValue: params.keyValue,
							dataInfo: {
								titleColName: '',
								showColumnsInfo: [],
								tagColumnsInfo: [],
							}
						};

						// 处理表单类对象的权限配置
						if (params.objName && params.objName.endsWith("表单")) {
							permissionStore.getUnPermissionConfigInfo(params.objName.slice(0, -2));
							uni.navigateTo({
								url: '/commonPage/Form/Edit'
							});
						}

					}
					// 判断是否跳转到配置列表
					else if (data.AP_Link.includes('/Form/List')) {
						console.log(data);
						inventoryStore.Menu = {
							APFunName: data.APFunName,
							Para: data.Para
						};
						uni.navigateTo({
							url: data.AP_Link
						})
					}
					else {

						path = urlArr[0] + '?APFunName=' + data.APFunName;
						if (urlArr.length > 1) {
							path = path + '&' + urlArr[1];
						}
						// 处理部分url地址映射
						uni.navigateTo({
							url: uni.$utils.replaceDispatchPath(data.AP_Link)
						})
					};
					break;
			}
		} else {
			uni.$utils.layer.alert("模块未开通");
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-WEIXIN */
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	/* #endif */

	.GridIcon_RightTop_add {
		background-color: #1eec71;
	}

	.GridIcon_RightTop_disable {
		background-color: #fff;
		border: 1px solid #f2f2f2;
	}

	.GridIcon_RightTop_delete {
		background-color: #fb6c4c;
	}

	.PopupGirdBox {
		padding: 12px;
		border-radius: 8px;
		position: relative;

		.GridIcon_RightTop {
			position: absolute;
			right: -6px;
			top: -6px;
			border-radius: 9999px;
			width: 16px;
			height: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}


	// 编辑状态数据
	// 编辑状态内容背景色
	.Edit_Main_Box {
		background-color: #f2f2f2;
	}

	// 编辑状态图标背景色
	.Edit_Icon_Box {
		background-color: #fff;
	}

	// 非编辑状态内容背景色
	.Routine_Main_Box {
		background-color: #fff;
	}

	// 非编辑状态图标背景色
	.Routine_Icon_Box {
		background-color: #f9f9f9;
	}

	.common__popup {
		width: 100%;
		// height: 80vh;
		// background-color: #fff;
		padding-bottom: 60px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		&__top {
			.EditClass {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 6px 8px;

				.Left_Box {
					padding: 4px 10px;
				}

				.Right_Box {
					padding: 4px 10px;
					border-radius: 12px;

				}

				// 编辑按钮
				.EditText {
					border: 1px solid #ebebeb;
					background-color: #fff;
				}

				// 保存按钮
				.SaveText {
					color: #1ea751;
				}
			}
		}

		&__main {
			height: 60vh;
			padding: 8rpx 30rpx 20rpx;

			.GirdMaxBox {
				// margin-top: 10px;

				:deep(.u-grid) {
					margin-top: 20px !important;

					:deep(.u-grid-item) {
						margin-bottom: 14px !important;

					}

				}

				.grid-text {
					display: block !important;
					height: 80rpx !important;
					width: 120rpx !important;
					// line-height: 40px;
					text-align: center !important;
					font-size: 24rpx !important;
					margin-top: 10rpx !important;
				}
			}
		}
	}

	.EditBottomBox {
		z-index: 99999;
		// border-top: 1px solid #333;
		box-shadow: 0px 1px 12px -7px;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 84px;
		background-color: #fff;
		width: 100%;
		padding-top: 10px;
	}

	.tabbar-container {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		width: 100%;
		height: 70px;
		// box-shadow: 0 0 9px -5px #999;
		display: flex;
		align-items: center;
		// padding: 5px 0;
		color: #999999;
		background-color: #fff;
		z-index: 99999;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);

		.Tabbar-Box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100%;
			z-index: 99999;
			background: #fff;
			// box-shadow: 0 0 9px -5px #999;
			border-top: 1px solid #eaeaea;
			padding: 6px 0;

			.GirdBox {
				flex: 1;
				display: flex;
				// justify-content: space-evenly;
				justify-content: space-around;
				align-items: center;
			}

			.tabbar-item {
				// width: 24%;
				flex: 1;
				height: 46px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				text-align: center;

				.item-top {
					width: 40px;
					height: 36px;
					// padding: 10px 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					// background-color: pink;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.item-bottom {
					font-size: 24rpx;
					width: 100%;
				}
			}

			.item-active {
				/* color: #4cbbff; */
				color: #51d0d0;
			}

			.center-item {
				flex: 0.5 !important;
				display: block;
				position: relative;

				.item-top {
					flex-shrink: 0;
					width: 44px;
					height: 44px;
					overflow: hidden;
					position: absolute;
					padding: 2px;
					/* top: -30px; */
					top: 0;
					/* left: calc(50% - 50px); */
					left: 50%;
					transform: translateX(-50%);
					border-radius: 50%;
					box-shadow: 0px 1px 19px -10px #999;
					background-color: #ffffff;

					image {
						/* background-color: #4cbbff; */
						background-color: #51d0d0;
						border-radius: 50%;
						// padding: 4px;
					}

					.item-bottom {
						position: absolute;
						bottom: 5px;
					}
				}
			}
		}
	}
</style>